<template>
  <div id="app">
    <div>======================== 登录和注册页面 示例 ==============</div>
    <Login/>
    <p>**************************</p>
    <SignUpForm/>
    <br>
    <div>======================== 表单(双向绑定) 示例 ==============</div>
    <TestForm/>
    <div>======================== DOM 示例 ========================</div>
    <Test-Dom/>
    <div>======================== 插槽 示例 ========================</div>
    <!-- <MyBtn test="点击我" />
    <MyBtn test="取消我"/> -->
    <MyBtn>点击我</MyBtn>
    <MyBtn>取消我</MyBtn>
    <MyBtn>
      点击以下文章>>>>>>
      <template v-slot:title>
        这是我的标题
      </template>
      <template v-slot:sub-title>
        这是我的副标题
      </template>
      <template v-slot:article>
        这是我的文章主体
      </template>
    </MyBtn>
    <div>======================== 生命周期函数 示例 ========================</div>
    <Lifecycle/>
    <div>======================== 组件计数器 示例 ========================</div>
    <Calc/>
    <div>======================== v-if 示例 ========================</div>
    <p v-if="isLogin">您已登录</p>
    <p v-if="!isLogin">您未登录</p>
    <div>======================== v-for 示例 ========================</div>
    <ul>
      <li v-for="(item, index) of headerList" :key="index">{{ item }}</li>
    </ul>
    <p>学生信息</p>
    <table border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="({name, age}, index) of students" :key="index">
          <td>{{ name }}</td>
          <td>{{ age }}</td>
        </tr>
      </tbody>
    </table>
    <div>======================== 单组件 示例 ========================</div>
    <TestView/>
    <div>======================== 图片切换组件 示例 ========================</div>
    <TestPicChangeVue/>
    <div>======================== 主页 示例 ========================</div>
    <Search/>
    <Swiper/>
    <Container/>
    <div>======================== 父子组件传递 示例 ========================</div>
    <br>
    <h1>{{ text }}</h1>
    <TestProp :msg="message" @changeCtx="ctx" @change2Ctx="ctx2"></TestProp>
    <div>======================== 购物车 示例 ========================</div>
    <Cart/>
    <div>======================== 计算属性和监听器 示例 ========================</div>
    <TestComputedWatch />
    <div>======================== 购物车2 升级版 示例 ========================</div>
    <CartTwo/>
  </div>
</template>

<script>
import Calc from './components/Calc.vue';
import TestView from './components/TestView.vue';
import TestPicChangeVue from './components/TestPicChange.vue';
import Search from './components/homePage/Search.vue';
import Swiper from './components/homePage/Swiper.vue';
import Container from './components/homePage/Container.vue';
import TestProp from './components/TestProp.vue';
import Cart from './components/shoppingCart/Cart.vue';
import TestComputedWatch from './components/TestComputedWatch.vue';
import CartTwo from './components/shoppingCart2/Cart2.vue';
import Lifecycle from './components/Lifecycle.vue';
import MyBtn from './components/MyBtn.vue';
import TestDom from './components/Test-Dom.vue';
import TestForm from './components/TestForm.vue';
import Login from './components/formPage/Login.vue';
import SignUpForm from './components/formPage/SignUpForm.vue';
  

export default {
  name: 'App',
  data(){
    return {
      text:"我是父组件，请改变我的标题",
      message: "父组件传过来的数据",
      isLogin: true,
      headerList: ["首页", "日常", "关于我"],
      students: [
        {name: "aaa", age: 16},
        {name: "bbb", age: 34},
        {name: "ccc", age: 56},
      ],
    }
  },

  methods: {
    ctx: function(t1){
      this.text = t1
    },
    ctx2: function(t2) {
      this.text = t2;
    },
  },

  // 注册组件
  components: {
    Calc,
    TestView,
    TestPicChangeVue,
    Search,
    Swiper,
    Container,
    TestProp,
    Cart,
    TestComputedWatch,
    CartTwo,
    Lifecycle,
    MyBtn,
    TestDom,
    TestForm,
    Login,
    SignUpForm
}
};

  
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
</style>
